<template>
	<view class="history flex-column">
		<view class="history-line">{{ config?.historyMessageContent }}</view>
	</view>
</template>

<script lang="ts" setup>
const props = defineProps({
	config: { type: Object, default: () => { } },
})
</script>

<style lang="scss" scoped>
.history {
	height: 104rpx;

	&-line {
		color: #666;
		font-size: 24rpx;
		position: relative;

		&::before,
		&::after {
			content: '';
			width: 15vw;
			height: 0;
			transform: translateY(-50%);
			border-bottom: 2rpx dashed #ccc;
			position: absolute;
			top: 50%;
		}

		&::before {
			right: calc(100% + 20rpx);
		}

		&::after {
			left: calc(100% + 20rpx);
		}
	}
}
</style>